<template>
<table border="1px">
  <caption>个人简介</caption>
  <tr>
    <td>图片:</td>
    <td><img :src="person.picture" alt=""></td>
  </tr>
  <tr>
    <td>姓名:</td>
    <td>{{person.name}}</td>
  </tr>
  <tr>
    <td>年龄:</td>
    <td>{{person.age}}</td>
  </tr>
  <tr>
    <td>朋友:</td>
    <td>
      <ul v-for="friend in person.friends">
        <li>{{friend}}</li>
      </ul>

    </td>
  </tr>
</table>
  <br>
  <el-button type="primary" @click="loadInfo()">加载数据</el-button>
</template>

<script setup>
import {ref} from "vue";

const person=ref({
  picture:'',
  name:'',
  age:'',
  friends:[]
  }
);
let p={
  picture:'fcq.jpg',
  name:'范传奇',
  age:'20',
  friends:['路飞','索隆','娜美']
};
const loadInfo=()=>{
  person.value.picture=p.picture;
  person.value.name=p.name;
  person.value.age=p.age;
  person.value.friends=p.friends;

};

</script>

<style scoped>
  table{
    width: 300px;
  }
  table img{
    width: 200px;
  }
</style>